<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchList">
        <a-row :gutter="48">
          <a-col :md="8" :sm="24">
            <a-form-item label="权益名称/展示名称">
              <a-input v-model="queryParam.name" placeholder="" />
            </a-form-item>
          </a-col>
          <!-- <a-col :md="8" :sm="24">
            <a-form-item label="状态">
              <a-select
                v-model="queryParam.status"
                placeholder="请选择"
                :getPopupContainer="triggerNode => triggerNode.parentNode"
                @change="handleChange1"
              >
                <a-select-option value="null">全部</a-select-option>
                <a-select-option value="0">禁用</a-select-option>
                <a-select-option value="1">启用</a-select-option>
              </a-select>
            </a-form-item>
          </a-col> -->
          <!-- <a-col :md="8" :sm="24">
            <a-form-item label="所属会员卡">
              <a-select
                v-model="queryParam.memberCardId"
                placeholder="请选择"
                :getPopupContainer="triggerNode => triggerNode.parentNode"
                @change="handleChange2"
              >
                <a-select-option value="null">全部</a-select-option>
                <a-select-option v-for="(item, index) in goodsList" :key="index" :value="item.id">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col> -->
          <a-col :md="8" :sm="24">
            <a-form-item label="权益类型">
              <a-select v-model="queryParam.rightsType" placeholder="请选择" :getPopupContainer="triggerNode => triggerNode.parentNode">
                <a-select-option value="">全部</a-select-option>
                <a-select-option :value="item.rightType" v-for="(item, index) in rightsTypeList" :key="index">{{ item.groupName }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="所属权益包">
              <a-select v-model="queryParam.memberCardId" placeholder="请选择" :getPopupContainer="triggerNode => triggerNode.parentNode">
                <a-select-option value="">全部</a-select-option>
                <a-select-option :value="item.id" v-for="(item, index) in goodsList" :key="index">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item label="适用商家类型">
              <a-select v-model="queryParam.suitableStoreType" placeholder="请选择" :getPopupContainer="triggerNode => triggerNode.parentNode">
                <a-select-option value="">全部</a-select-option>
                <a-select-option :value="item.code" v-for="(item, index) in suitableList" :key="index">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="16" :sm="24">
            <span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden' }">
              <a-button type="primary" @click="searchList">查询</a-button>
              <a-button style="margin-left: 18px" @click="resetList">重置</a-button>
              <a-button style="margin-left: 18px" type="primary" icon="plus" @click="handleAdd">新建</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <s-table ref="table" size="default" :rowKey="record => record.id" :columns="columns" :data="loadData" :pagination="paginationProps" :scroll="{ x: 1500 }">
      <span slot="status" slot-scope="text">
        <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />
      </span>
      <span slot="id" slot-scope="text">
        <ellipsis :length="6" tooltip>{{ text }}</ellipsis>
      </span>
      <span slot="name" slot-scope="text">
        <ellipsis :length="6" tooltip>{{ text }}</ellipsis>
      </span>
      <span slot="memberCardId" slot-scope="text">
        {{ memberCardName(text) }}
        <!-- <ellipsis :length="4" tooltip>{{ text }}</ellipsis> -->
      </span>
      <span slot="outName" slot-scope="text">
        <ellipsis :length="8" tooltip>{{ text }}</ellipsis>
      </span>
      <span slot="rightsType" slot-scope="text">{{ rightsName(text) }}</span>
      <span slot="createTime" slot-scope="text">{{ text | utc2beijing }}</span>
      <span slot="suitableStoreType" slot-scope="text">{{ text | suitableFilter }}</span>
      <span slot="action" slot-scope="text, record">
        <template>
          <!-- <a @click="handleDetail(record)">查看</a> -->
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="handleEnable(record, 1)" v-show="record.status == 0">启用</a>
          <a @click="handleEnable(record, 0)" v-show="record.status == 1">禁用</a>

          <!-- <a-dropdown>
            <a-menu slot="overlay">
              <a-menu-item><a @click="handleEdit(record)">编辑</a></a-menu-item>
              <a-menu-item><a @click="handleEnable(record, 1)" v-show="record.status == 0">启用</a></a-menu-item>
              <a-menu-item><a @click="handleEnable(record, 0)" v-show="record.status == 1">禁用</a></a-menu-item>
            </a-menu>
            <a>更多<a-icon type="down"/></a>
          </a-dropdown> -->
        </template>
      </span>
    </s-table>
  </a-card>
</template>

<script>
import { STable, Ellipsis } from '../../components'
import { rightsList, rightsCreate, rightConfigList } from '@/api/box/marketing'
import { cardList, goodsCardList } from '@/api/box/product'
import { routeMixin } from '@/views/box/util/routeMixin'

const columns = [
  {
    title: '权益ID',
    dataIndex: 'id',
    align: 'center',
    // scopedSlots: { customRender: 'id' },
    width: 130
  },
  {
    title: '权益名称',
    dataIndex: 'name',
    align: 'center',
    width: 150
    // scopedSlots: { customRender: 'name' }
  },
  {
    title: '展示名称',
    dataIndex: 'outName',
    align: 'center',
    scopedSlots: { customRender: 'outName' },
    width: 150
  },
  {
    title: '类型',
    dataIndex: 'rightsType',
    align: 'center',
    scopedSlots: { customRender: 'rightsType' },
    width: 120
  },
  {
    title: '所属权益包',
    dataIndex: 'memberCardId',
    align: 'center',
    scopedSlots: { customRender: 'memberCardId' },
    width: 150
  },
  {
    title: '适用商家类型',
    dataIndex: 'suitableStoreType',
    scopedSlots: { customRender: 'suitableStoreType' },
    width: 120
  },
  /* {
    title: '顺序权重',
    dataIndex: 'sorted',
    align: 'center',
    width: 100
  }, */
  {
    title: '状态',
    dataIndex: 'status',
    align: 'center',
    scopedSlots: { customRender: 'status' },
    width: 100
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    align: 'center',
    width: 150
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '120px',
    align: 'center',
    fixed: 'right',
    scopedSlots: { customRender: 'action' }
  }
]

const statusMap = {
  0: {
    status: 'error',
    text: '禁用'
  },
  1: {
    status: 'success',
    text: '启用'
  }
}
const suitableList = [
  { name: '直营可用', code: 1 },
  { name: '经销可用', code: 2 },
  { name: '直营经销均可用', code: 3 },
  { name: '自定义', code: 4 }
]
export default {
  mixins: [routeMixin],
  components: {
    STable,
    Ellipsis
  },
  data() {
    this.columns = columns
    return {
      suitableList,
      goodsList: [],
      paginationProps: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      // create model
      confirmLoading: false,
      // 查询参数
      queryParam: {
        rightsType: '',
        memberCardId: '',
        suitableStoreType: ''
      },
      rightsTypeList: [],
      goodsPackage: [],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        const queryParam = JSON.parse(JSON.stringify(this.queryParam))
        if (queryParam.rightsType == '') {
          delete queryParam.rightsType
        }
        if (queryParam.memberCardId == '') {
          delete queryParam.memberCardId
        }
        if (queryParam.suitableStoreType == '') {
          delete queryParam.suitableStoreType
        }
        const data = {}
        data.page = parameter
        data.requestData = queryParam
        return rightsList(data).then(res => {
          if (res.code === 0) {
            const data = res
            // console.log(data)
            /* for (var i = 0; i < data.data.length; i++) {
              data.data[i].key = i
              const memberCardId = data.data[i].memberCardId
              for (var j = 0; j < this.goodsList.length; j++) {
                if (memberCardId === this.goodsList[j].id) {
                  data.data[i].memberCardName = this.goodsList[j].name
                }
              }
            } */
            // console.log(data)
            return data
          } else {
            this.$message.error(res.msg)
            const data = {
              page: {
                pageNo: 0,
                count: 0,
                pageSize: 10
              },
              data: []
            }
            return data
          }
        })
      }
    }
  },
  filters: {
    statusFilter(type) {
      return statusMap[type].text
    },
    statusTypeFilter(type) {
      return statusMap[type].status
    },
    rightsType(value) {
      if (value === 1) {
        return '搭配师搭盒'
      } else if (value === 2) {
        return '预售盒子'
      } else if (value === 3) {
        return '展示权益'
      }
    },
    suitableFilter(t) {
      if (t) {
        return suitableList.filter(e => e.code == t)[0].name
      } else {
        return t
      }
    }
  },
  watch: {
    $route(to, from) {
      if (this.siblingNameList.includes(from.name) && to.path.includes('/box/operations/rights/list')) {
        this.$refs.table.refresh() // 来自编辑及详情刷新当前列表
      } else if (this.siblingNameList.includes(to.name) && from.path.includes('/box/operations/rights/list')) {
      } else {
        if (to.path.includes('/box/operations/rights/list') && !this.siblingNameList.includes(from.name)) {
          console.log('*******rights-true*******')
          this.resetList()
        }
        // else if (from.path.includes('/box/operations/rights/list') && !this.siblingNameList.includes(to.name)) {
        //   this.$destroy()
        // }
      }
    }
  },
  computed: {
    memberCardName(val) {
      return val => {
        const result = this.goodsList.filter(e => e.id == val)
        if (result.length > 0) {
          return result[0].name
        } else {
          return val
        }
      }
    },
    rightsName(val) {
      return val => {
        const result = this.rightsTypeList.filter(e => e.rightType == val)
        if (result.length > 0) {
          return result[0].groupName
        } else {
          return val
        }
      }
    }
  },
  created() {},
  mounted() {
    this.getRightConfigList()
    // this.getGoodsCardList()
    this.fetchGoodsList()
  },
  methods: {
    fetchGoodsList() {
      cardList()
        .then(res => {
          if (res.code === 0) {
            for (var i = 0; i < res.data.length; i++) {
              this.goodsList.push({
                id: res.data[i].id,
                name: res.data[i].name
              })
            }
          } else {
            this.$message.error(res.msgs)
          }
        })
        .catch(err => {
          console.log('fetchGoodsList:' + err)
        })
    },
    searchList() {
      this.$refs.table.refresh(true)
    },
    resetList() {
      this.queryParam = {
        rightsType: '',
        memberCardId: '',
        suitableStoreType: ''
      }
      this.$refs.table.refresh(true)
    },
    // handle
    handleEnable(record, type) {
      record.status = type
      const data = {
        requestData: {
          status: type,
          id: record.id
        }
      }
      rightsCreate(data)
        .then(res => {
          if (res.code === 0) {
            this.$message.success(res.msg)
            this.$refs.table.refresh()
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log('handleEnable:' + err)
        })
    },
    handleAdd() {
      this.$router.push('/box/operations/rights/edit/add')
    },
    handleEdit(record) {
      this.$router.push(`/box/operations/rights/edit/${record.id}`)
    },
    handleDetail(record) {
      this.$router.push(`/box/operations/rights/detail/${record.id}`)
    },
    handleChange1(value) {
      // console.log(`selected1 ${value}`)
    },
    handleChange2(value) {
      // console.log(`selected2 ${value}`)
    },
    getRightConfigList() {
      rightConfigList().then(res => {
        if (res.code == 0) {
          let result = res.data
          this.rightsTypeList = result.map(e => {
            return { groupName: e.groupName, id: e.id, rightType: e.rightType }
          })
          console.log(this.rightsTypeList)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    getGoodsCardList() {
      let params = {
        page: {
          pageNo: 1,
          pageSize: 100
        }
      }
      goodsCardList(params).then(res => {
        if (res.code == 0) {
          this.goodsPackage = res.data
          console.log(this.goodsPackage)
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
body {
  /deep/ .ant-select-dropdown {
    z-index: 5;
  }
}
</style>

